<template>
<div>
    <h1>App根组件---{{color}}</h1>
    <button type="button" class="btn btn-primary" @click="color='blue'">Toggle Blue</button>
    <hr>
    <LevelTwo></LevelTwo>
</div>
</template>

<script>
import LevelTwo from "./LevelTwo.vue";
import {computed} from 'vue';
export default{
    name:'MyApp',
    data(){
        return{
            // 1.定义父组件要向子孙组件共享的数据
            color:'red',
        }
    },
    // 
    provide(){
        // 2.provide函数return的对象中，包含了"要向子孙组件共享的数据"
        return{
            color:computed(()=>this.color),
            count:1,
        }
    },
    computed:{
        LevelTwo,
    }
}
</script>

<style lang="less" scoped></style>